<!--
 * @Author: your name
 * @Date: 2021-03-31 20:39:00
 * @LastEditTime: 2021-04-14 11:13:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \web\node\views\back\login.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撩课-后台管理系统</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="node_modules/nprogress/nprogress.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 登录 -->
    <div class="login">
        <div class="login-wrap">
            <div class="avatar">
                <img src="./uploads/logo.jpg" class="img-circle" alt="">
            </div>
            <form action="http://localhost:3000/user/api/login" method="post" class="col-md-offset-1 col-md-10">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">
                        <i class="fa fa-id-card-o"></i>
                    </span>
                    <input id="user_name" name="user_name" type="text" class="form-control" placeholder="撩课口令">
                </div>
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">
                        <i class="fa fa-key"></i>
                    </span>
                    <input id="user_pwd" name="user_pwd" type="password" class="form-control" placeholder="密码">
                </div>
                <button type="submit" class="btn btn-lg btn-danger btn-block btn-login">登 录</button>
            </form>
        </div>
    </div>
    
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="js/md5.js"></script>
    <script>
        $(function(){
            $(".btn-login").on("click",function(){

                //盐
                let S_KEY = "@^xrt%sf?q~xv24XdCIE"

                //获取用户的名称和密码
                let user_name = $("#user_name").val();
                let user_pwd = $("#user_pwd").val();
                let md5_user_pwd = md5(user_pwd + S_KEY);


                //发起登录请求
                $.ajax({
                    url: $("form").attr("action"),
                    type: $("form").attr("method"),
                    data: `user_name=${user_name}&user_pwd=${md5_user_pwd}`,
                    success: function(data){
                        console.log(data)
                        if(data.status === 200){
                            //存储token到本地
                            localStorage.setItem("token", data.result.token);
                            //界面跳转到后端
                            window.location.href = "/back"
                        }else{
                            alert("用户名或者密码输入错误，请重新登录！")
                            window.location.reload()
                        }
                    }
                })
            })
        })
    </script>
</body>
</html>
